<!-- 日记详情页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title">日记详情</div>
      </div>
    </van-sticky>

    <!-- 日记详情 -->
    <div style="padding-bottom: 20px;">
      <div class="content_main_div">
        <div class="user_avatar">
          <van-image
            round
            width="3rem"
            height="3rem"
            :src="userImg"
            @click="toUserMainPage(this.diaryAuthorUserAid)"
          />
        </div>
        <div class="nick_content_image_comment">
          <div class="nick_guanzhu">
            <div class="dot_name">
              <div class="nickName_div">{{ nickName }}</div>
              <div class="guanzhu_div" v-if="!isDiaryAuthorSelf">
                <van-button
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                  round
                  size="mini"
                  @click="clickGuanzhu"
                >
                  &emsp;{{ guanzhu }}&emsp;
                </van-button>
              </div>
              <div class="dot">
                <!-- 冒泡菜单：包含收藏和编辑 -->
                <van-popover
                  v-model:show="popMenuShow"
                  :actions="popMenuOptions"
                  @select="selectPopItem"
                >
                  <template #reference>
                    <van-icon name="ellipsis" size="24px" />
                  </template>
                </van-popover>
              </div>
            </div>
          </div>
          <div class="copywritting">{{ diaryContentCopywritting }}</div>
          <!-- 图片list -->
          <div class="diary_img_list" v-if="diaryDetailImgList[0] != ''">
            <van-image
              id="diary_img_per"
              v-for="(item, index) in diaryDetailImgList"
              :key="index"
              width="5.5rem"
              height="5.5rem"
              radius="5px"
              fit="fill"
              :src="item"
              @click="clickPicEnlarge(diaryDetailImgList, index)"
            />
          </div>
          <!-- 时间和点赞 -->
          <div class="diary_img_list1">
            <div class="diary_time">{{ diaryTime }}</div>
            <div @click="clickZan" style="font-size: 15px; color: #909399;">
              <div v-if="!fabulous">
                <van-icon class="dianzan" name="good-job-o" />
                &nbsp;{{ zanCount }}
              </div>
              <div v-if="fabulous">
                <van-icon
                  class="dianzan"
                  style="color: #303133;"
                  name="good-job"
                />
                {{ zanCount }}
              </div>
            </div>
            <div
              @click="changeReply(this.nickName, null)"
              style="font-size: 16px; margin-left: -30px; color: #909399;"
            >
              <van-icon
                class="dianzan"
                style="color: #303133;"
                name="comment"
              />
              {{ commentCount }}
            </div>
          </div>
        </div>
      </div>

      <!-- 评论部分 -->
      <div class="comment_main">
        <div class="comment_title">评论</div>
        <div class="henxian"></div>
        <!-- 每一条评论 -->
        <div
          class="per_comment"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div>
            <van-image
              round
              width="3rem"
              height="3rem"
              :src="item.commentUserAvatar"
              @click="toUserMainPage(item.commentUserAid)"
            />
          </div>
          <div class="comment_content">
            <div class="comment_nickname_time_zan">
              <div>
                <div class="comment_nickname">
                  {{ item.nickName }}&nbsp;
                  <van-tag type="danger" v-if="item.isAuthorSelf">作者</van-tag>
                </div>
                <div class="comment_time">{{ item.commentTime }}</div>
              </div>
              <div
                class="comment_zan"
                @click="changeCommentLikeState(item.commentAid)"
              >
                <van-icon
                  name="good-job-o"
                  v-if="item.isCommentDianzan === false ? true : false"
                />
                <van-icon
                  name="good-job"
                  v-if="item.isCommentDianzan === true ? true : false"
                />
                {{ item.commentLikesCount }}
              </div>
            </div>
            <div
              class="comment_copywritting"
              @click="changeReply(item.nickName, item.commentAid)"
            >
              <!-- 别分享给我，意有所指的歌单，向别人吐露过的真心话，给别人写歌字里行间的爱意，还有回忆里不属于我们的山高水长 -->
              {{ item.commentContent }}
            </div>

            <div
              class="replay_comment_main"
              v-if="item.childCommentList.length !== 0"
            >
              <div
                v-for="child in this.treeToList(item.childCommentList)"
                :key="child.commentAid"
              >
                <div>
                  <span
                    class="blue_user"
                    @click="toUserMainPage(child.commentUserAid)"
                  >
                    {{ child.nickName }}
                    <van-tag type="danger" v-if="child.isAuthorSelf">
                      作者
                    </van-tag>
                  </span>
                  回复
                  <span
                    class="blue_user"
                    @click="toUserMainPage(child.parentCommentUserAid)"
                  >
                    {{ child.parentCommentUserName }}
                    :
                  </span>
                  <span @click="changeReply(child.nickName, child.commentAid)">
                    {{ child.commentContent }}
                  </span>
                  <div
                    @click="changeReply(child.nickName, child.commentAid)"
                    class="comment_time"
                  >
                    {{ child.commentTime }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 发表评论   -->
      <div class="fabiao_main">
        <div class="field_comment">
          <van-field
            v-model="replyComment"
            :label="aitePeople"
            ref="inputVal"
          />
        </div>
        <div class="btn_fabiao">
          <van-button round size="small" color="orange" @click="commentPublish">
            &emsp;发&nbsp;表&emsp;
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import {
  getDiaryAllInfoByAid,
  concernUser,
  cancelConcernUser,
  thumbsUpToDiary,
  cancelThumbsUpToDiary,
  clickCommentLike,
  diaryCommentPublish,
  currentUserCollectCurrentDiary,
  userCancelCollectDiary,
} from '../../api/diary'
export default {
  data() {
    return {
      diaryAuthorUserAid: null, //这条日记的作者用户aid
      diaryAid: this.$route.query.diaryAid, // 日记列表页面传过来的diaryAid
      nickName: '聂小倩', // 日记作者的昵称
      userImg: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', // 用户头像
      diaryContentCopywritting:
        '一抹落日的余晖刚挥映着东汉历经沧桑的斜阳古道，又炫染着盛唐平沙落雁的小桥流水人家;一枝傲雪的寒梅刚绽放在明末柳岸闻莺的大明湖畔，又芬芳在晚清长河落日的沧壮与悲凉。时光荏苒，岁月蹉跎，人生易逝，悲欢离合。俯察人生百味，静观世态淡凉。人们不禁要拷问:“何为人生，何为诚信”。',
      diaryDetailImgList: [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1113%2F061320111942%2F200613111942-7-1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658459293&t=7d9e2f35b53233753a310f5c019d5b0c',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091103%2F3q1o1hb545c3q1o1hb545c.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658459293&t=f694fcc6544c61ec125a1495e69f43f5',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090903%2Fnwnibrfke5pnwnibrfke5p.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658459293&t=a77083bc6ee9a505e86754e8e31ec2a9',
      ], // 日记详情的图片数组
      diaryTime: '2022年12月1日 14:52', // 日记的发布时间
      guanzhu: '关 注', // 关注与已关注
      fabulous: false, // 赞了
      zanCount: 200, // 点赞数量
      replyComment: '', // 发表评论输入框里的值
      isDiaryAuthorSelf: true, // 这条日记是否是当前登陆的作者写的
      isGuanzhu: false, // 是否关注了这条日记的作者
      commentList: [], // 评论列表
      aitePeople: '@作者', // 发表输入框前面的label：@某某
      commentParentAid: null, // 评论的父aid
      commentCount: 10, // 评论的数量
      popMenuShow: false, // 冒泡菜单展示
      popMenuValue: 0, // 下拉菜单选中的值
      popMenuOptions: [
        { text: '编辑', icon: 'edit' },
        { text: '收藏', icon: 'like-o' },
      ],
    }
  },
  created() {
    // 根据日记aid后端获取日记相关的所有信息
    this.getDiaryAllInfoByAidFunc()
  },
  methods: {
    // 根据日记aid后端获取日记相关的所有信息
    getDiaryAllInfoByAidFunc() {
      getDiaryAllInfoByAid(this.diaryAid).then((res) => {
        // console.log(res)
        this.diaryAuthorUserAid = res.data.data.diaryAuthorUserAid
        this.userImg = res.data.data.userImg
        this.nickName = res.data.data.nickName
        this.isGuanzhu = res.data.data.isGuanzhu
        if (this.isGuanzhu) {
          // 如果关注了
          this.guanzhu = '已关注'
        }
        this.isDiaryAuthorSelf = res.data.data.isDiaryAuthorSelf
        this.judgeIsCollectAndIsAuthor(res)
        this.diaryContentCopywritting = res.data.data.diaryContentCopywritting
        this.diaryDetailImgList = res.data.data.diaryDetailImgList
        this.diaryTime = res.data.data.diaryTime
        this.fabulous = res.data.data.fabulous
        this.zanCount = res.data.data.likesNumber
        this.commentList = res.data.data.diaryCommentList
        this.commentCount = res.data.data.commentCount
      })
      this.aitePeople =
        this.isDiaryAuthorSelf === true ? '@自己' : this.aitePeople
    },

    judgeIsCollectAndIsAuthor(res) {
      if (!this.isDiaryAuthorSelf) {
        if (res.data.data.isCollected) {
          this.popMenuOptions = [{ text: '已收藏', icon: 'like' }]
        } else {
          this.popMenuOptions = [{ text: '收藏', icon: 'like-o' }]
        }
      } else {
        if (res.data.data.isCollected) {
          this.popMenuOptions = [
            { text: '编辑', icon: 'edit' },
            { text: '已收藏', icon: 'like' },
          ]
        } else {
          this.popMenuOptions = [
            { text: '编辑', icon: 'edit' },
            { text: '收藏', icon: 'like-o' },
          ]
        }
      }
    },

    // 点击三个点只有气泡弹出的选项，点击某一项之后触发
    selectPopItem(action, index) {
      if (action.text === '编辑') {
        this.$router.push({
          path: '/diaryEditOrAdd',
          query: {
            diaryAid: this.diaryAid,
          },
        })
      } else if (action.text === '收藏' && index == 1) {
        // 当前登陆用户收藏这条日记
        currentUserCollectCurrentDiary(this.diaryAid).then((res) => {
          if (res.data.code === 10000) {
            // 收藏成功跳转收藏列表页面
            this.$toast.success('收藏成功！')
            this.$router.push('/myCollectionPage')
          }
        })
      } else if (action.text === '已收藏' && index == 1) {
        this.$dialog
          .confirm({
            message: '亲，您已经收藏了这条日记，是否取消收藏？',
          })
          .then(() => {
            // 用户取消收藏这条日记
            userCancelCollectDiary(this.diaryAid).then((res) => {
              this.$toast.success('已取消收藏！')
              this.getDiaryAllInfoByAidFunc();
            })
          })
          .catch(() => {
            // 取消不做任何事情
          })
      }
    },

    // 点赞
    clickZan() {
      this.fabulous = !this.fabulous
      if (this.fabulous) {
        thumbsUpToDiary(this.diaryAid)
        this.zanCount += 1
      } else {
        cancelThumbsUpToDiary(this.diaryAid)
        this.zanCount -= 1
      }
    },

    // 点击关注
    clickGuanzhu() {
      if (this.guanzhu === '已关注') {
        this.$dialog
          .confirm({
            message: '确认取消关注吗？',
          })
          .then(() => {
            cancelConcernUser(this.diaryAid).then((res) => {
              if (res.data.code === 10000) {
                this.$toast({
                  message: res.data.message,
                  type: 'success',
                  duration: 800,
                })
              }
            })
            this.guanzhu = '关 注'
          })
          .catch(() => {
            // 取消不做任何事情
          })
      } else {
        // 关注这个user
        concernUser(this.diaryAid).then((res) => {
          if (res.data.code === 10000) {
            this.$toast({
              message: res.data.message,
              type: 'success',
              duration: 800,
            })
            this.guanzhu = '已关注'
          } else {
            this.$toast({
              message: res.data.message,
              type: 'fail',
              duration: 800,
            })
          }
        })
      }
    },

    // 点击图片放大
    clickPicEnlarge(diaryDetailImgList, index) {
      ImagePreview({
        images: diaryDetailImgList,
        startPosition: index,
      })
    },

    // 点击某一条评论改变回复的@对象
    changeReply(nickName, commentAid) {
      this.commentParentAid = commentAid
      // console.log(this.commentParentAid)
      this.aitePeople =
        '@' + (nickName.length > 2 ? nickName.substring(0, 2) : nickName)
      // 将焦点移到输入框里，调用focus方法
      this.$nextTick(() => {
        this.$refs.inputVal.focus()
      })
    },

    // 点击评论里面的赞，改变赞的状态
    changeCommentLikeState(commentAid) {
      clickCommentLike(commentAid).then((res) => {
        if (res.data.code === 10000) {
          this.getDiaryAllInfoByAidFunc()
        }
      })
    },

    // 点击发表
    commentPublish() {
      if (this.replyComment.trim() !== '') {
        const params = {
          diaryAid: this.diaryAid,
          commentContent: this.replyComment,
          commentParentAid: this.commentParentAid,
        }
        diaryCommentPublish(params).then((res) => {
          if (res.data.code === 10000) {
            this.getDiaryAllInfoByAidFunc()
            this.replyComment = ''
          }
        })
      } else {
        this.$toast({
          message: '亲，写一点内容吧！',
          duration: 800,
        })
      }
    },

    //转结构（list就是你要转的树状数据）扁平化
    treeToList(list) {
      let res = []
      for (const item of list) {
        const { childCommentList, ...i } = item
        if (childCommentList && childCommentList.length) {
          res = res.concat(this.treeToList(childCommentList))
        }
        res.push(i)
      }
      return res
    },

    // 点击用户头像或评论区的蓝色字体去该用户主页
    toUserMainPage(userAid) {
      this.$router.push({
        path: '/userPersonalMainPage',
        query: {
          userAid,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: rgb(86, 82, 82);
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.top_title {
  width: 40%;
  // background-color: blue;
  text-align: center;
  margin-left: 3.8em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 600;
}
.return_div {
  width: 30px;
  // background-color: blue;
  padding-left: 20px;
}
.content_main_div {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  display: flex;
}
.user_avatar {
  width: 3.5em;
}
.nick_content_image_comment {
  width: 18em;
}
.nick_guanzhu {
  width: 16em;
  height: 1em;
  display: flex;
  justify-content: space-between;
  padding: 1em 1em;
}
.nickName_div {
  color: #3e3f41;
  font-size: 20px;
}
.copywritting {
  font-size: 17px;
  letter-spacing: 2px;
  color: #303133;
  white-space: pre-wrap;
}
.diary_img_list {
  width: 19em;
  // background-color: #cdcfd3;
  display: flex;
  flex-flow: wrap;
}
.diary_img_list1 {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.diary_time {
  color: #909399;
  font-size: 14px;
}
.dianzan {
  font-size: 20px;
}
.guanzhu_div {
  margin-top: -5px;
}
.comment_main {
  padding-bottom: 40px;
  width: 90%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.comment_title {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: large;
  font-weight: 600;
  width: 2.2em;
  height: 1.5em;
  // background-color: #303133;
  color: #606266;
  border-bottom: 3px solid red;
}
.henxian {
  height: 1.5px;
  background-color: #cdcfd3;
}
.per_comment {
  display: flex;
  margin-top: 10px;
}
.comment_nickname_time_zan {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  // background-color: #a7aaaf;
  width: 16em;
}
.comment_content {
  padding-left: 10px;
}
.comment_nickname {
  color: #303133;
}
.comment_zan {
  margin: 8px;
}
.comment_time {
  color: #909399;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.comment_copywritting {
  color: #606266;
  letter-spacing: 1px;
}
.replay_comment_main {
  margin-top: 20px;
  color: #606266;
  border-left: 5px solid palevioletred;
  padding-left: 6px;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: rgb(248, 245, 246);
  border-radius: 3px;
}
.blue_user {
  color: rgb(117, 117, 215);
  font-weight: 600;
}
.fabiao_main {
  // height: 5em;
  // background-color:rgb(232, 245, 241);
  display: flex;
  border-radius: 5px;
}
.btn_fabiao {
  margin-top: 7px;
}
/deep/ .van-field__label {
  text-align: center;
  width: 5em;
}
/deep/ .van-cell {
  border: 1px solid rgb(208, 240, 208);
  // height: 30px;
  padding: 8px 0;
}
#diary_img_per {
  margin-right: 10px;
  margin-top: 10px;
}
/deep/ .field_comment {
  width: 17em;
  margin-left: 18px;
}
/deep/ .van-field__label {
  width: 4em;
  color: #dcdfe6;
}
.dot_name {
  width: 20em;
  display: flex;
  justify-content: space-between;
}
</style>
